<template>
  <div>
    <van-search v-model="value" placeholder="搜索" />
    <van-tabs type="card" v-model="active" @click="changetab">
      <van-tab v-for="item in catelist" :key="item.id" :title="item.title"></van-tab>
    </van-tabs>
    <!-- <van-tabs v-model="active" @click="changetab" title-active-color="red">
      <van-tab v-for="item in catelist" :key="item.id" :title="item.title"></van-tab>
    </van-tabs> -->
    <hr>
    价格
    <van-icon name="arrow-up" @click="up" />
    <van-icon name="arrow-down" @click="down" />

    <hr>
    <ul class="card">
      <li v-for="item in goodlist" :key="item.id" @click="gotodetail(item)">
        <div>
          <img :src="item.img" altx="">

          <p style="text-align:left;font-size:14px">{{item.title}}</p>
          <p class="hey">
            <span style="color:red" class="first">
              ￥{{item.price}}
            </span>
            <span class="second">
              <van-icon name="shopping-cart-o" size="25px" @click.stop="add(item)" />
            </span>
          </p>
        </div>
      </li>
    </ul>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: '',
        active: 0,
        catelist: [],
        goodlist: [],
      }
    },
    created() {
      this.$axios
        .get("fenlei.json")
        .then((res) => {
          // console.log(res);
          this.catelist = res.data.data
        })

      this.changetab() //再次调用 打开时就出现商品
    },
    methods: {
      changetab() {
        this.$axios
          .get("list.json")
          .then((res) => {
            console.log(res);
            this.goodlist = res.data.shop.filter((item) => {
              return item.cid == this.active
            })

          }).catch((err) => {

          })
      },
      gotodetail(item) {
        console.log(item)
        this.$router.push({
          path: "/detail",
          query: {
            item
          }
        })
      },

      //价格从大到小
      up() {
        this.goodlist.sort((a, b) => {
          return a.price - b.price
        })
      },
      // 价格从小到大
      down() {
        this.goodlist.sort((a, b) => {
          return b.price - a.price
        })

      },
      add(item) {
        this.$store.commit("addshop", item)
        this.$toast("添加成功")
      }
    },

  }
</script>
<style lang="scss">
  .card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;


    li {
      width: 48%;

      div { 
        width: 100%;

        img {
          width: 80%;

        }
      }


    }
  }

  .hey {
    display: flex;

    .first {
      flex: 1;
    }

    .second {
      flex: 1;
    }
  }
</style>